<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="title">20100601</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<!-- page specific -->
<script type="text/javascript">

function showComp1(cmp) {
  cmp.render('main_area');
}
function showComp2(cmp) {
  ct = Ext.getCmp('main_area');
  ct.update('');
  cmp.render('main_area');
}
function showComp3(cmp) {
  Ext.getCmp('main_area').update(cmp);
}

showComp = showComp2;

function cmd1() { showComp(sampleComp()) }
function cmd2() { showComp(sampleComp()) }
function cmd3() { showComp(sampleComp()) }
function sampleComp() {
  return new Ext.Panel({title:'Sample component',
    html:'This is just a dummy. Actual application'+
    'returns GridPanels, FormPanels and others.'})
}

var main_menu = new Ext.Toolbar({ 
  region:'north',height:27,items:[
  { text: 'First', menu: [
    {text:'First command',handler:cmd1},
    {text:'Second command',handler:cmd2}] },
  { text: 'Second', menu: [
    {text:'Third command',handler:cmd3} ] }
]});  

Ext.onReady(function() {
  var viewport = new Ext.Viewport({ 
    items: [ main_menu,
      { region: "center", id: "main_area", xtype: "panel", 
        html:'Welcome text.', layout: 'fit', autoHeight: true } 
    ], layout: "border" 
  });
  viewport.render('body');
});
</script>
</head><body>
</body></html>